<template>
    <el-card shadow="always" :body-style="{ padding: '30px' }">
      <!-- 头像 -->
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="120" :src="circleUrl" class="son" />
        </div>
      </div>
      <p class="avatar-tip">点击更换</p>
      <!-- 信息 -->
      <div class="main-form">
        <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        class-name="son"
        :label-width="100"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <!-- 用户名 -->
            <el-form-item
              label="用户名："
              class="el-form-item__label"
            >
              <el-input
                v-model="formInline.user"
                placeholder="1396945_lMwR"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 生日 -->
            <el-form-item label="生日：">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="请选择日期"
                :size="size"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 性别 -->
            <el-form-item label="性别：">
              <el-radio-group
                v-model="radio3"
                size="small"
              >
                <el-radio
                  label="1"
                  border
                >男</el-radio>
                <el-radio
                  label="2"
                  border
                  disabled
                >女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 城市 -->
            <el-form-item label="城市：">
              <el-select
                v-model="value"
                class="m-2"
                placeholder="Select"
                size="large"
              >
                <el-option value="1" />
                <el-option value="1" />
                <el-option value="1" />
                <el-option value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 成长等级 -->
            <el-form-item label="成长等级：">
              <el-tag color="pink">Tag 1</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 技能水平 -->
            <el-form-item label="技能水平：">
              <el-select
                class="m-2"
                placeholder="Select"
                size="large"
              >
                <el-option value="1" />
                <el-option value="1" />
                <el-option value="1" />
                <el-option value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- 兴趣技能 -->
            <el-form-item label="兴趣技能：">
              <el-badge
                value="X"
                class="item"
              >
                <span class="spanq">古典舞</span>
              </el-badge>
              <span class="spanq lastone">请选择</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      </div>
      <div class="button">
      <div>保存</div>
    </div>

    </el-card>

  </template>

  <script setup lang="ts">
  import { reactive, toRefs, ref } from 'vue'

  const radio1 = ref('1')
  const radio2 = ref('1')
  const radio3 = ref('1')
  const radio4 = ref('1')
  //头像
  const state = reactive({
    circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
      'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const,
  })
  const { circleUrl, squareUrl, sizeList } = toRefs(state)

  // 信息
  //日期
  const formInline = reactive({
    user: '',
    region: '',
  })
  const onSubmit = () => {
    console.log('submit!')
  }

  const size = ref<'' | 'large' | 'small'>('')

  const value1 = ref('')
  const value2 = ref('')

  const shortcuts = [
    {
      text: 'Today',
      value: new Date(),
    },
    {
      text: 'Yesterday',
      value: () => {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24)
        return date
      },
    },
    {
      text: 'A week ago',
      value: () => {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
        return date
      },
    },
  ]

  const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
  }
  </script>

  <style scoped>
  .block {
    display: flex;
  }

  .block .son {
    margin: 0 auto;
  }

  .avatar-tip {
    text-align: center;
    color: #7d8090;
    font-size: 14px;
  }

  .main-form {
    padding: 30px 140px;
  }

  .el-form-item__label {
    font-size: 13px;
    color: rgb(0, 0, 0);
    height: 40px;
    line-height: 40px
  }
  .item {
  width: 70px;
  height: 30px;
  color: #111;
  border: 1px solid #ddd;
  padding: 0 15px;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
}


.button {
  display: flex;
  justify-content: center;
}

.button div {
  width: 140px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  background-color: #f93684;
  color: #fff;
}
  </style>
